var countRows=1;

$(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
        transport: {
            create: {
                url: appBosch.crud.create,
                dataType: "json"
            },
            read: {
                url: appBosch.crud.read,
                dataType: "json"
            },
            update: {
                url: appBosch.crud.update,
                dataType: "json"
            },
            destroy: {
                url: appBosch.crud.destroy,
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                var params = {};
                switch (operation)
                {
                    case 'create':
                        params = {models: kendo.stringify(options.models)};
                        break;
                    case 'read':
                        break;
                    case 'update':
                        params = {models: kendo.stringify(options.models)};
                        break;
                    case 'destroy':
                        params = {id: options.models[0].value};
                        break;
                }
                return params;
            }
        },
        batch: true,
        schema: {
            model: {
                id: "value",
                fields: {
                    text: {
                        editable: true,
                        nullable: false,
                        validation: {
                            required: true,
                            min: 1
                        }
                    },
                    color: {
                        defaultValue: '#000',
                        editable: true,
                        nullable: false,
                        type: 'string'
                    },
                    moe_id: {
                        defaultValue: appBosch.moeId
                    }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        toolbar: [
            {
                name: "create",
                text: "Agregar área"
            },
            {
                name: "excel"
            },
            {
                name: "pdf"
            }
        ],
        excel: {
            allPages: true,
            fileName: "Áreas.xlsx",
            filterable: true
        },
        pdf: {
            allPages: true,
            fileName: "Áreas.pdf"
        },
        resizable: true,
        columnMenu: true,
        scrollable: true,
        filterable: true,
        selectable: true,
        navigatable: true,
        sortable: true,
        dataBound: function () {
            countRows = 1;
        },
        dataSource: dataSource,
        columns: [
            {title: "#", template: '#=countRows++#', width: 40 },
            {field: "text", title: "Nombre"},
            {
                field: "color",
                title: "Color",
                width: 150,
                editor: colorPickerEditor,
                template: '<span style="display: block; width: 50px; ;background-color: #=color#">&nbsp;</span>'
            },
            {command: [
                    {name: "preguntas", text: "?", click: showQuestions},
                    {text: "Líneas", click: showLines},
                    {
                        name: "edit",
                        text: {
                            edit: "",
                            update: "Actualizar",
                            cancel: "Cancelar"
                        }
                    },
                    {
                        name: "destroy",
                        text: ""
                    }], title: "&nbsp;"}],
        editable: {
            confirmation: "¿Estas seguro que deseas eliminar está área?",
            mode: "inline"
        }
    });
});

function showLines(e)
{
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var areaId = dataItem.id;
    var url = appBosch.urlLines + '/' + areaId + '/' + appBosch.moeId;
    $(location).attr('href', url);
}

function showQuestions(e)
{
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var id = dataItem.id;
    var url = appBosch.crud.questions + '/2/' + appBosch.moeId + '/' + id;
    $(location).attr('href', url);
}

function colorPickerEditor(container, options) {
    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoColorPicker({
            value: "#ffffff",
            buttons: false,
            select: preview
        });
}

function preview(e) {
    $("#background").css("background-color", e.value);
}